markdown-text-editor 2.0.0-beta.2 → 2.0.0-beta.3

package/dist/markdown-text-editor.es.js

@@ -2397,6 +2397,14 @@ var jn = An(), X = class {
 	constructor(e, t) {
 		this.editor = e, this.defaultText = `${t} text`, this.button = this.createButton(), this.title = t;
 	}
+	trimSelection() {
+		let e = this.editor.usertextarea, { selectionStart: t, selectionEnd: n, value: r } = e;
+		if (t === n) return;
+		let i = t, a = n;
+		for (; i < a && /\s/.test(r[i]);) i++;
+		for (; a > i && /\s/.test(r[a - 1]);) a--;
+		i !== a && (i !== t || a !== n) && e.setSelectionRange(i, a);
+	}
 	createButton(e) {
 		let t = document.createElement("button"), n = this.title ? `${this.title.replace(/ /g, "-")}-btn`.toLowerCase() : "";
 		t.innerHTML = e;
@@ -2412,6 +2420,7 @@ var jn = An(), X = class {
 		super(e, "Bold"), this.button = this.createButton("\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M7 5h6a3.5 3.5 0 0 1 0 7h-6l0 -7\" /><path d=\"M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7\" /></svg>\n        ");
 	}
 	applySyntax() {
+		this.trimSelection();
 		let e = this.editor.usertextarea, { selectionStart: t, selectionEnd: n } = e, r = e.value, i = r.substring(t, n), a = "", o = 0;
 		if (i.startsWith("***") && i.endsWith("***")) a = "*" + i.slice(3, -3) + "*";
 		else if (i.startsWith("**") && i.endsWith("**")) a = i.slice(2, -2);
@@ -2429,6 +2438,7 @@ var jn = An(), X = class {
 		super(e, "Italic"), this.button = this.createButton("\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M11 5l6 0\" /><path d=\"M7 19l6 0\" /><path d=\"M14 5l-4 14\" /></svg>\n        ");
 	}
 	applySyntax() {
+		this.trimSelection();
 		let e = this.editor.usertextarea, { selectionStart: t, selectionEnd: n } = e, r = e.value, i = r.substring(t, n), a = "", o = 0;
 		if (i.startsWith("***") && i.endsWith("***")) a = "**" + i.slice(3, -3) + "**";
 		else if (i.startsWith("*") && i.endsWith("*") && !i.startsWith("**")) a = i.slice(1, -1);
@@ -2446,6 +2456,7 @@ var jn = An(), X = class {
 		super(e, "Strikethrough"), this.button = this.createButton("\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M5 12l14 0\" /><path d=\"M16 6.5a4 2 0 0 0 -4 -1.5h-1a3.5 3.5 0 0 0 0 7h2a3.5 3.5 0 0 1 0 7h-1.5a4 2 0 0 1 -4 -1.5\" /></svg>\n        ");
 	}
 	applySyntax() {
+		this.trimSelection();
 		let e = this.editor.usertextarea, { selectionStart: t, selectionEnd: n } = e, r = e.value, i = r.substring(t, n), a = "", o = 0;
 		if (i.startsWith("~~") && i.endsWith("~~")) a = i.slice(2, -2);
 		else if (r.substring(t - 2, t) === "~~" && r.substring(n, n + 2) === "~~") {
@@ -2563,6 +2574,7 @@ var zn = class extends X {
 		super(e, "Link"), this.button = this.createButton("\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M9 15l6 -6\" /><path d=\"M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464\" /><path d=\"M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463\" /></svg>\n        ");
 	}
 	applySyntax(e) {
+		this.trimSelection();
 		let t = this.editor, n = t.usertextarea, { selectionStart: r, selectionEnd: i } = n, a = n.value, o = a.substring(0, r), s = a.substring(i);
 		if (o.endsWith("[") && /^\]\([^)]+\)/.test(s)) {
 			let e = s.match(/^\]\(([^)]+)\)/);
@@ -2764,6 +2776,7 @@ var Un = class extends X {
 		super(e, "Code"), this.button = this.createButton("\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M7 8l-4 4l4 4\" /><path d=\"M17 8l4 4l-4 4\" /><path d=\"M14 4l-4 16\" /></svg>\n        ");
 	}
 	applySyntax() {
+		this.trimSelection();
 		let e = this.editor.usertextarea, { selectionStart: t, selectionEnd: n } = e, r = e.value, i = r.substring(t, n);
 		if (i.startsWith("`") && i.endsWith("`")) {
 			this.editor.insertText(i.slice(1, -1), 0, 0);
@@ -3607,7 +3620,7 @@ var Mr = class {
 	}
 }, Nr = class {
 	constructor(e) {
-		this.editor = e, this._matches = [], this._currentIndex = -1, this._caseSensitive = !1, this._panel = null, this._findInput = null, this._replaceInput = null, this._countEl = null, this._replaceRow = null, this._caseSensitiveBtn = null, this._highlightEl = null, this._scrollHandler = null, this._taHandler = this._onTextareaKeyDown.bind(this), e.usertextarea.addEventListener("keydown", this._taHandler);
+		this.editor = e, this._matches = [], this._currentIndex = -1, this._caseSensitive = !1, this._panel = null, this._findInput = null, this._replaceInput = null, this._countEl = null, this._replaceRow = null, this._caseSensitiveBtn = null, this._highlightEl = null, this._matchTop = null, this._matchHeight = 0, this._scrollHandler = null, this._taHandler = this._onTextareaKeyDown.bind(this), e.usertextarea.addEventListener("keydown", this._taHandler);
 	}
 	_onTextareaKeyDown(e) {
 		let t = e.ctrlKey || e.metaKey;
@@ -3686,16 +3699,13 @@ var Mr = class {
 		this._matches.length !== 0 && (this._currentIndex = (this._currentIndex - 1 + this._matches.length) % this._matches.length, this._selectCurrent(), this._updateCount());
 	}
 	_selectCurrent() {
-		if (this._currentIndex === -1 || this._matches.length === 0) {
-			this._clearMatchHighlight();
-			return;
-		}
-		let { start: e } = this._matches[this._currentIndex];
-		this._scrollToMatch(this.editor.usertextarea, e), this._showMatchHighlight();
+		this._currentIndex === -1 || this._matches.length === 0 ? this._clearMatchHighlight() : (this._showMatchHighlight(), this._scrollMatchIntoView());
 	}
-	_scrollToMatch(e, t) {
-		let n = parseInt(window.getComputedStyle(e).lineHeight) || 20, r = e.value.substring(0, t).split("\n").length - 1, i = Math.floor(e.clientHeight / n);
-		e.scrollTop = Math.max(0, (r - Math.floor(i / 2)) * n);
+	_scrollMatchIntoView() {
+		let e = this.editor.usertextarea;
+		if (this._matchTop === null || this._matchHeight <= 0) return;
+		let t = e.clientHeight, n = e.scrollTop, r = this._matchHeight, i = n;
+		this._matchTop - r < n ? i = this._matchTop - r : this._matchTop + this._matchHeight + r > n + t && (i = this._matchTop + this._matchHeight + r - t), i !== n && (e.scrollTop = Math.max(0, i), this._highlightEl && (this._highlightEl.style.top = this._matchTop - e.scrollTop + "px"));
 	}
 	_showMatchHighlight() {
 		if (this._clearMatchHighlight(), this._currentIndex === -1 || !this._matches.length) return;
@@ -3706,7 +3716,7 @@ var Mr = class {
 			pointerEvents: "none",
 			top: "0",
 			left: "0",
-			right: "0",
+			width: n.clientWidth + "px",
 			whiteSpace: "pre-wrap",
 			wordBreak: "break-word",
 			overflowWrap: "break-word",
@@ -3721,7 +3731,9 @@ var Mr = class {
 		let o = document.createElement("span");
 		o.textContent = n.value.substring(e, t) || "​", a.appendChild(document.createTextNode(n.value.substring(0, e))), a.appendChild(o), a.appendChild(document.createTextNode(n.value.substring(t))), i.appendChild(a);
 		try {
-			let e = i.getBoundingClientRect(), t = o.getBoundingClientRect(), r = document.createElement("div");
+			let e = i.getBoundingClientRect(), t = o.getBoundingClientRect();
+			this._matchTop = t.top - e.top, this._matchHeight = t.height;
+			let r = document.createElement("div");
 			Object.assign(r.style, {
 				position: "absolute",
 				top: t.top - e.top - n.scrollTop + "px",
@@ -3738,7 +3750,7 @@ var Mr = class {
 		}
 	}
 	_clearMatchHighlight() {
-		this._highlightEl?.remove(), this._highlightEl = null;
+		this._highlightEl?.remove(), this._highlightEl = null, this._matchTop = null;
 	}
 	_updateCount() {
 		this._countEl && (this._matches.length === 0 ? this._countEl.textContent = this._findInput?.value ? "No results" : "" : this._countEl.textContent = `${this._currentIndex + 1} of ${this._matches.length}`);
@@ -3876,20 +3888,23 @@ var Mr = class {
 			this._autoGrow(), this.renderHybrid(), this.debouncedPreview(), this.notifyChange();
 		}, this._scrollHandler = () => {
 			this._scrollRaf ||= requestAnimationFrame(() => {
-				if (this._scrollRaf = null, this.mode === "hybrid" && (this.displayLayer.scrollTop = this.usertextarea.scrollTop, this.displayLayer.scrollLeft = this.usertextarea.scrollLeft), this.preview && this.previewContent) {
-					let e = this.usertextarea, t = e.scrollTop / (e.scrollHeight - e.clientHeight);
-					this.previewContent.scrollTop = t * (this.previewContent.scrollHeight - this.previewContent.clientHeight);
-				}
+				this._scrollRaf = null, this.mode === "hybrid" && (this.displayLayer.scrollTop = this.usertextarea.scrollTop, this.displayLayer.scrollLeft = this.usertextarea.scrollLeft), this.preview && this.previewContent && this._syncPreviewScroll();
 			});
 		}, this.usertextarea.addEventListener("input", this._inputHandler), this.usertextarea.addEventListener("scroll", this._scrollHandler);
 	}
 	debouncedPreview() {
 		this.preview && (clearTimeout(this.previewTimer), this.previewTimer = setTimeout(() => {
-			this.previewContent.innerHTML = this._renderMarkdown(this.usertextarea.value), this.wirePreviewCheckboxes();
-			let e = this.usertextarea, t = e.scrollTop / (e.scrollHeight - e.clientHeight);
-			this.previewContent.scrollTop = t * (this.previewContent.scrollHeight - this.previewContent.clientHeight);
+			let e = this.previewContent.scrollTop;
+			this.previewContent.innerHTML = this._renderMarkdown(this.usertextarea.value), this.wirePreviewCheckboxes(), this._syncPreviewScroll() || (this.previewContent.scrollTop = e);
 		}, 150));
 	}
+	_syncPreviewScroll() {
+		if (!this.preview || !this.previewContent) return !1;
+		let e = this.usertextarea, t = e.scrollHeight - e.clientHeight;
+		if (t <= 0) return !1;
+		let n = e.scrollTop / t, r = this.previewContent.scrollHeight - this.previewContent.clientHeight;
+		return this.previewContent.scrollTop = n * r, !0;
+	}
 	renderMarkdown(e) {
 		return this._renderMarkdown(e);
 	}